<template>

  <a-spin :spinning="confirmLoading">
    <a-form :form="form">

      <a-row>


        <a-col :xs="24" :sm="12">
          <a-form-item label="付款编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{ data.payablesNo }}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="合同信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{ data.leaseContractId_text }}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="资产信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{ data.assetId_text }}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="资产明细" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{ data.assetSubIds_text }}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="客户信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{ data.customerId_text }}
          </a-form-item>
        </a-col>

        <a-col :xs="24" :sm="12">
          <a-form-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
            {{ data.totalMoney | money }}
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
            {{ data.remark }}
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="标题" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
            <a-input v-if="!disabled" v-decorator="['title', validatorRules.title]" rows="4" placeholder="请输入标题" />
            <span v-else>{{ data.title }}</span>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="申请说明" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
            <a-textarea v-if="!disabled" v-decorator="['processDescription', validatorRules.processDescription]"
                        rows="4" placeholder="请输入申请说明" />
            <span v-else>{{ data.processDescription }}</span>
          </a-form-item>
        </a-col>

      </a-row>


      <!-- 子表单区域 -->
      <a-tabs value="activeKey1">
        <a-tab-pane tab="退款明细" key="activeKey1" :forceRender="true">
          <!-- table区域-begin -->
          <a-table
            :scroll="{ y: 180 }"
            bordered
            ref="activeKey1"
            size="middle"
            rowKey="id"
            :dataSource="payablesDetails.dataSource"
            :loading="payablesDetails.loading"
            :pagination="false"
          >

            <a-table-column title="序号" :width="70" align="center" fixed='left' key="a">
              <template slot-scope="t,r,i">
                <span> {{(ipagination.current - 1) * ipagination.pageSize + i + 1}} </span>
              </template>
            </a-table-column>

            <a-table-column title="款项说明" dataIndex="paymentInstructions_dictText" :width="200" align="center">
              <template slot-scope="t,r,i">
                <span> {{ t }} </span>
              </template>
            </a-table-column>

            <a-table-column title="付款金额" dataIndex="amountMoney" align="center">
              <template slot-scope="t,r,i">
                <span>{{ t | money }}</span>
              </template>
            </a-table-column>

            <!--<a-table-column title="版本" dataIndex="remark" key="asa" :width="100" align="center"
                            :sorter="(a, b) => a.version - b.version">
              <template slot-scope="t,r,i">
                <span> v.{{ t }} </span>
              </template>
            </a-table-column>-->
            <a-table-column title="备注" dataIndex="remark" align="center">
              <template slot-scope="t,r,i">
                <span> {{ t }} </span>
              </template>
            </a-table-column>

          </a-table>
        </a-tab-pane>

      </a-tabs>

    </a-form>

    <BaseForm v-if="!disabled" ref="baseForma"></BaseForm>

    <a-form-item v-if="!disabled"
                 :wrapperCol="{ span: 24 }"
                 style="text-align: center">
      <a-button type="primary" :disabled="disabled || btndisabled" @click="handleSubmit">保存</a-button>
      <a-button style="margin-left: 8px" :disabled="disabled" @click="close">取消</a-button>
    </a-form-item>

    <a-form-item v-if="task"
                 :wrapperCol="{ span: 24 }"
                 style="text-align: center">
      <a-button type="primary" @click="passTask">通过</a-button>
      <a-button style="margin-left: 8px" @click="backTask">驳回</a-button>
    </a-form-item>
  </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import '@/assets/less/TableExpand.less'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import { ActivitiFormMixin } from '@/views/activiti/mixins/activitiFormMixin'
import JEditableTable from '@comp/jeecg/JEditableTable'
import BaseForm from './BaseForm'
import { queryAssetImageByMainId } from '@api/asset'

let app0
export default {
  name: 'PaymentForm',
  mixins: [ActivitiFormMixin],
  components: {
    BaseForm,
    JEditableTable,
    JDate,
    JDictSelectTag,
    JSearchSelectTag
  },
  data () {
    return {
      // form
      form: this.$form.createForm(this),
      payablesDetails: {
        loading: false,
        dataSource: []
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      validatorRules: {
        title: {
          rules: [
            { required: true, message: '请输入标题!' }
          ]
        },
        processDescription: {
          rules: [
            { required: true, message: '请输入申请说明!' }
          ]
        }
      },
      url: {
        payablesDetails: {
          list: '/zcgl/payablesInfo/queryPayablesDetailsByMainId'
        }
      }
    }
  },
  beforeCreate: function () {
    app0 = this
  },
  filters: {},
  created () {
    this.payablesDetails.dataSource = []
    this.init()
    // if (!this.disabled) {
    //   this.$nextTick(() => {
    //   })
    // }parent_id
  },
  methods: {
    setValue () {
      this.data.title = this.processData.title
      this.dictText(this.data.leaseContractId, 'zcgl_lease_contract_info,contract_num,id', 'leaseContractId_text')
      this.dictText(this.data.assetId, 'zcgl_asset_info,asset_name,id,status>1', 'assetId_text')
      this.dictText(this.data.assetSubIds, 'zcgl_asset_info_sub,room_name,id', 'assetSubIds_text')
      this.dictText(this.data.customerId, 'zcgl_customer_info,name,id', 'customerId_text')

      if (this.data.payablesDetails) {
        this.payablesDetails.dataSource = JSON.parse(this.data.payablesDetails)
      } else {
        this.getPayablesDetails(this.data.id)
      }
      if (!this.disabled) {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.data, 'processDescription', 'title'))
          if (this.processData.procDefId) {
            let keys = []
            keys.push(this.processData.procDefId)
            this.$refs.baseForma.selectedRowKeys = keys
          }
          this.$refs.baseForma.queryParam = { status: 1, routeName: this.processData.routeName }
          this.$refs.baseForma.loadData(1)
        })
      }
    },
    getPayablesDetails (id) {
      this.getListByUrl(this.url.payablesDetails.list, { id: id }, this.payablesDetails)
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.$refs.baseForma.selectedRowKeys.length != 1) {
            this.$message.warning('请选择流程图')
            return
          }
          values.filedNames = 'processDescription'
          // values.filedNames = 'processDescription,payablesDetails'
          values.procDefId = this.$refs.baseForma.selectedRowKeys[0]
          // values.payablesDetails = encodeURI(JSON.stringify(this.payablesDetails.dataSource))
          this.handleSubmitVa(values)
        }
      })
    }
  }
}
</script>

<!--lang="less"-->
<style lang="less" scoped>
@import '~@assets/less/common.less';

.ant-form-item {
  margin-bottom: 10px;
}

.ant-col {
  min-height: 51px !important;
}

/*.ant-form-item span {*/
/*  position: absolute !important;*/
/*  min-height: 20px !important;*/
/*}*/
</style>